<template>
  <div class="role">
    <div class="search_box">
      <el-form :model="form" label-width="80px">
        <el-form-item label="角色">
          <el-input v-model="form.username" clearable />
        </el-form-item>
        <el-form-item>
          <el-button size="default" type="primary" @click="search">搜索</el-button>
          <el-button size="default" type="primary" @click="addNew">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        ref="ElTableRefs"
        :data="tableData"
        style="width: 100%; height: calc(100% - 60px)"
        max-height="700"
        border
      >
        <el-table-column type="index" width="60" />
        <el-table-column prop="role" label="角色" align="center">
          <template #default="{ row }">
            <span>{{ row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="powerList" label="权限" align="center" :formatter="timeFormat" />
        <!-- <el-table-column prop="createAt" label="创建时间" align="center" :formatter="timeFormat" />
        <el-table-column prop="updateAt" label="更新时间" align="center" :formatter="timeFormat" /> -->
        <el-table-column label="操作" fixed="right" width="220" align="center">
          <template #default="{ row }">
            <el-button size="default" link @click="edit(row)">修改</el-button>
            <el-button type="danger" size="default" link @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>fenye</div>
    </div>
  </div>
  <AddNew
    ref="addNewRefs"
    v-model:dialogVisible="dialogVisible"
    :rowData="rowData"
    @addSuccess="getRoleFn"
  />
</template>

<script setup lang="ts">
import { onBeforeMount, ref, reactive, onMounted } from 'vue';
import { timeFormatter } from '@/utils/formatter';
import { ElMessage } from 'element-plus';
import AddNew from './c-comps/AddNew.vue';
import { getRoleApi, deleteRoleApi } from '@/service/api';

const dialogVisible = ref<boolean>(false);

const roleMap = new Map([
  [0, '超级管理员'],
  [1, '管理员'],
  [2, '普通用户']
]);

const form = reactive({
  username: '',
  phone: '',
  email: ''
});
let tableData = ref([]);
let rowData = ref({});
let addNewRefs = ref();

const addNew = async () => {
  dialogVisible.value = true;
};
const edit = (row) => {};
const del = async (row) => {
  const res: Res = await deleteRoleApi({ roleId: row._id });
  if (res.code !== 200) return ElMessage.error(res.msg);
  ElMessage.success(res.msg);
  getRoleFn();
};
const search = async () => {};

const getRoleFn = async () => {
  const res: Res = await getRoleApi();
  if (res.code !== 200) return ElMessage.error(res.msg);
  tableData.value = res.data;
  // console.log(res);
};

const timeFormat = (row, column, cellValue) => {
  if (!cellValue) return cellValue;
  return timeFormatter(cellValue);
};
onMounted(() => {
  getRoleFn();
});
</script>

<style scoped lang="less">
.role {
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  height: calc(100% - 30px);

  .search_box {
    margin-bottom: 15px;

    .el-form {
      display: flex;
      align-items: center;
      justify-content: left;
    }
  }
}
</style>
